<template>
	<view>
		<view class="topnav">
			<uni-nav-bar title="个人空间"></uni-nav-bar>
		</view>
		<view class="myBox">
			<view class="my">
				<view class="l-myinfo">
					<image style="width: 120rpx;height: 120rpx;border-radius:15px;" src="/static/a.png" mode=""></image>
				</view>
				<view class="r-myinfo">
					<view class="name">
						{{user.username}}
					</view>
					<view class="info">
						<text>永久VIP</text> 
					</view>
				</view>
			</view>
		</view>
		<view class="outherBox">
			<view class="history">
				<view class="historyItem" @click="goPage('/pages/collect/collect?historyType=book')">
					<span class="iconfont "></span><text>小说历史</text>
				</view>
				<view class="historyItem" @click="goPage('/pages/collect/collect?historyType=cartoon')">
					<text>漫画历史</text>
				</view>
				<view class="historyItem" @click="goPage('/pages/collect/collect?historyType=video')">
					<text>观影历史</text>
				</view>
				<view class="historyItem" @click="clearHistory">
					<text>清除所有历史</text>
				</view>
			</view>
			<view class="">
				<view class="historyItem" @click="goPage('/pages/bookshelf/bookshelf')">
					<text>收藏</text>
				</view>
			</view>
			<view class="">
				<view class="historyItem" @click="checkVersion">
					<text>设置</text>
				</view>
			</view>
			<view class="">
				<view class="historyItem" @click="checkVersion">
					<text>检查更新</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{username:"UU阅读"},
			}
		},
		onLoad() {
			
		},
		methods: {
			goPage(item){
				uni.navigateTo({
					url:item
				})
			},
			clearHistory(){
				let arr = ["book","cartoon","video"]
				arr.forEach(key=>{
					uni.removeStorageSync(key)
				})
			},
			checkVersion(){
				uni.showToast({
					mask:true,
					title:"有更新",
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.myBox{
		margin: 10rpx 0px;
	}
	.my{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding-left: 20rpx;
	}
	.l-myinfo,.r-myinfo{
		padding-right: 15rpx;
	}
	.r-myinfo{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.info{
		font-size: 25rpx;
		color: #ff0000;
		padding-bottom: 10rpx;
	}
	.historyItem{
		padding: 30rpx 20rpx;
		background-color: #f8f8f8;
		margin-bottom: 10rpx;
		font-size: 25rpx;
	}
</style>
